<template>
  <u-toast ref="uToast"></u-toast>
  <view class="WodeMsg">
    <view class="Title">个人资料</view>
    <view class="Msg">
      <view class="flex_al_cen_ju_bet">
        <view class="bold">我的头像</view>
        <view @click="afterRead" class="msg_avatar">
          <image :src="userInfo.avatar == null ? defaultAvatar : userInfo.avatar" mode="scaleToFill">
          </image>
        </view>

      </view>
      <!-- 我的昵称 -->
      <view class="flex_al_cen_ju_bet">
        <view class="bold">姓名</view>
        <u-input disabled :customStyle="{
          width: '200rpx',
          padding: '0',
          background: '#ffff'
        }" inputAlign="right" v-model="userInfo.nickname" :placeholderStyle="{ 'font-weight': 'none' }" />
      </view>
      <!-- 实名认证 -->
      <view class="flex_al_cen_ju_bet">
        <view class="bold">实名认证</view>
        <view class="certification" v-if="userInfo.realNameStatus == '1'">已认证</view>
        <view class="Nocertification" v-else @click="NavTo('/pages/Wode/certification')">未完成</view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { NavTo } from "@/utlis/uni_api";
import { onLoad } from "@dcloudio/uni-app";
import { getCurrentInstance } from "vue";
import msg from "@/Hooks/Wode/msg";
const defaultAvatar = '../../static/images/pulice/defaultAvatar.png'
const { proxy } = getCurrentInstance() as any;
const { userInfo, getMyInfo, afterRead } = msg(proxy)
onLoad(() => {
  getMyInfo()


})

</script>
<style lang="scss" scoped>
page {
  font-size: $fontS_30;
  background: #ffff;
}

body {
  background: #ffff;
}

:v-deep .uni-input-wrapper {
  width: 200rpx;
}

.WodeMsg {
  padding: 53rpx 47rpx;

  .bold {
    font-weight: bold;
    font-size: $fontS_30;
  }

  .Title {
    margin-bottom: 46rpx;
    font-weight: bold;
    font-size: $fontS_50;
  }

  .Msg {
    line-height: 3.5;

    .certification {
      text-align: center;
      width: 126rpx;
      height: 53rpx;
      line-height: 53rpx;
      color: $color__977;
      background: #eaebfa;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
    }

    .Nocertification {
      text-align: center;
      width: 126rpx;
      height: 53rpx;
      line-height: 53rpx;
      color: #d43509;
      background: #faebe6;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
    }
  }
}

.msg_avatar {

  width: 85rpx;
  height: 85rpx;
  border-radius: 50%;

  image {
    width: 85rpx;
    height: 85rpx;
    border-radius: 50%;
  }
}
</style>
